<template>
  <section class='full index-one' id='notice'>
    <div class='welcome-word'>
      <h6 class='greets' v-if='websiteConfig.name'>你好，欢迎来到{{ websiteConfig.name }}</h6>
      <div class='thanks' id='thanks'>{{ websiteConfig.homeThank }}</div>
    </div>
    <div class='rand-post'>
      <ul class='rand-mask'>
        <li style='--star-top:8' v-for='(item,index) in randomList' :key='index'>
          <a :href="ArticlePath.Path+item.id" class='star'></a>
          <a :href="ArticlePath.Path+item.id" class='post'>
            <time>发现{{ item.createTime }}年回忆</time>
            <span>{{ item.articleTitle }}</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useAppStore } from '@/stores/app'
import api from '@/api/api'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'HomeFull',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  setup() {
    const appStore = useAppStore()
    const reactiveData = reactive({
      randomList: [] as any
    })
    onMounted(() => {
      randomArticle()
    })
    const createTextEffect = () => {
      const textElement:any = document.querySelector('#thanks')
      const textContent = textElement.textContent
      const characters = textContent.split('')
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            textElement.innerHTML = ''
            for (let i = 0; i < characters.length; i++) {
              const character = characters[i]
              const characterElement = document.createElement('i')
              const characterTextNode = document.createTextNode(character)
              characterElement.appendChild(characterTextNode)
              characterElement.classList.add('text-effect')
              characterElement.style.animationDuration = '1s'
              characterElement.style.animationDelay = `${i * 0.1}s`
              textElement.appendChild(characterElement)
            }
            observer.disconnect()
          }
        })
      })
      observer.observe(textElement)
    }
    const randomPos = () => {
      const ulElements = document.querySelectorAll('ul.rand-mask')
      ulElements.forEach(ulElement => {
        const liElements = ulElement.getElementsByTagName('li')
        for (let i = 0; i < liElements.length; i++) {
          let randomValue: any = Math.floor(Math.random() * (121 - (-16))) + (-15)
          if (i == liElements.length - 1) {
            if (randomValue < 0){
              randomValue = Math.floor(Math.random() * (-6)) - 14
            }
            if (randomValue < 99) {
              randomValue = Math.floor(Math.random() * 20) + 100
            }
          }
          liElements[i].style.setProperty('--star-top', randomValue)
        }
      })
    }
    const randomArticle = () => {
      const params = {
        size: 3
      }
      api.getRandomArticle(params).then(({ data }) => {
        if (data.flag) {
          reactiveData.randomList = data.data
        }
      })
    }
    return {
      websiteConfig: computed(() => {
        return appStore.websiteConfig
      }),
      ...toRefs(reactiveData),
      randomPos,
      createTextEffect
    }
  },
  watch: {
    randomList: function() {
      this.$nextTick(this.randomPos)
    },
    websiteConfig:function() {
      this.$nextTick(this.createTextEffect)
    }
  }
})
</script>

